<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为官网 - 构建万物互联的智能世界</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 简单配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            huawei: {
              blue: '#165DFF',
              dark: '#0F172A',
              gray: '#64748B'
            }
          }
        }
      }
    }
  </script>
</head>

<body class="font-sans bg-white text-huawei-dark">
  <!-- 导航栏 -->
  <header class="fixed w-full top-0 z-50 bg-white shadow-sm">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- 品牌Logo -->
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 bg-huawei-blue rounded flex items-center justify-center">
            <span class="text-white font-bold text-xl">H</span>
          </div>
          <span class="text-xl font-bold text-huawei-blue">华为</span>
        </a>
        
        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-6">
          <a href="#products" class="hover:text-huawei-blue transition-colors">产品</a>
          <a href="#services" class="hover:text-huawei-blue transition-colors">服务</a>
          <a href="#about" class="hover:text-huawei-blue transition-colors">关于我们</a>
          <a href="#support" class="hover:text-huawei-blue transition-colors">支持</a>
        </nav>
        
        <!-- 功能按钮 -->
        <div class="flex items-center space-x-4">
          <button class="hover:text-huawei-blue transition-colors"><i class="fa fa-search"></i></button>
          <button class="hover:text-huawei-blue transition-colors"><i class="fa fa-shopping-cart"></i></button>
          <!-- 移动端菜单按钮 -->
          <button id="menuBtn" class="md:hidden hover:text-huawei-blue transition-colors">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
      <div class="container mx-auto px-4 py-2 space-y-2">
        <a href="#products" class="block py-2 hover:text-huawei-blue transition-colors">产品</a>
        <a href="#services" class="block py-2 hover:text-huawei-blue transition-colors">服务</a>
        <a href="#about" class="block py-2 hover:text-huawei-blue transition-colors">关于我们</a>
        <a href="#support" class="block py-2 hover:text-huawei-blue transition-colors">支持</a>
      </div>
    </div>
  </header>

  <main class="pt-16">
    <!-- 英雄区 -->
    <section class="h-[50vh] min-h-[350px] relative">
      <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-10"></div>
      <img src="https://picsum.photos/id/1/1920/1080" alt="华为手机" class="absolute w-full h-full object-cover">
      <div class="container mx-auto px-4 h-full flex items-center relative z-20">
        <div class="max-w-lg">
          <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-white mb-4">华为Mate系列 重新定义高端</h1>
          <p class="text-white/90 mb-6">搭载最新麒麟芯片，卓越摄影体验，开启智慧生活新方式</p>
          <div class="flex gap-3">
            <a href="#" class="px-5 py-2 bg-huawei-blue text-white rounded hover:bg-huawei-blue/90 transition-colors">了解更多</a>
            <a href="#" class="px-5 py-2 bg-white/20 text-white rounded border border-white/30 hover:bg-white/30 transition-colors">立即购买</a>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 产品展示区 -->
    <section id="products" class="py-12 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="text-center mb-8">
          <h2 class="text-2xl font-bold mb-2">热门产品</h2>
          <p class="text-huawei-gray max-w-2xl mx-auto">探索华为全系列产品，体验科技带来的美好生活</p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <!-- 产品卡片1 -->
          <div class="bg-white rounded overflow-hidden shadow-sm hover:shadow transition-shadow">
            <img src="https://picsum.photos/id/96/800/600" alt="智能手机" class="w-full h-40 object-cover">
            <div class="p-3">
              <h3 class="font-semibold text-lg mb-1">智能手机</h3>
              <p class="text-huawei-gray text-sm mb-2">Mate系列 | P系列 | Nova系列</p>
              <a href="#" class="text-huawei-blue text-sm hover:underline">查看全部 →</a>
            </div>
          </div>
          
          <!-- 产品卡片2 -->
          <div class="bg-white rounded overflow-hidden shadow-sm hover:shadow transition-shadow">
            <img src="https://picsum.photos/id/48/800/600" alt="笔记本电脑" class="w-full h-40 object-cover">
            <div class="p-3">
              <h3 class="font-semibold text-lg mb-1">笔记本电脑</h3>
              <p class="text-huawei-gray text-sm mb-2">MateBook X Pro | 荣耀MagicBook</p>
              <a href="#" class="text-huawei-blue text-sm hover:underline">查看全部 →</a>
            </div>
          </div>
          
          <!-- 产品卡片3 -->
          <div class="bg-white rounded overflow-hidden shadow-sm hover:shadow transition-shadow">
            <img src="https://picsum.photos/id/119/800/600" alt="平板电脑" class="w-full h-40 object-cover">
            <div class="p-3">
              <h3 class="font-semibold text-lg mb-1">平板电脑</h3>
              <p class="text-huawei-gray text-sm mb-2">MatePad Pro | 畅享平板</p>
              <a href="#" class="text-huawei-blue text-sm hover:underline">查看全部 →</a>
            </div>
          </div>
          
          <!-- 产品卡片4 -->
          <div class="bg-white rounded overflow-hidden shadow-sm hover:shadow transition-shadow">
            <img src="https://picsum.photos/id/180/800/600" alt="智能穿戴" class="w-full h-40 object-cover">
            <div class="p-3">
              <h3 class="font-semibold text-lg mb-1">智能穿戴</h3>
              <p class="text-huawei-gray text-sm mb-2">Watch GT | 手环 | 耳机</p>
              <a href="#" class="text-huawei-blue text-sm hover:underline">查看全部 →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 特色服务 -->
    <section id="services" class="py-12">
      <div class="container mx-auto px-4">
        <div class="text-center mb-8">
          <h2 class="text-2xl font-bold mb-2">华为服务</h2>
          <p class="text-huawei-gray max-w-2xl mx-auto">全方位服务支持，为您带来无忧体验</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 服务项1 -->
          <div class="text-center p-4 rounded hover:bg-gray-50 transition-colors">
            <div class="w-14 h-14 bg-huawei-blue/10 rounded-full flex items-center justify-center mx-auto mb-3">
              <i class="fa fa-truck text-xl text-huawei-blue"></i>
            </div>
            <h3 class="font-semibold mb-1">快速配送</h3>
            <p class="text-huawei-gray text-sm">全国范围内24小时送达，部分城市支持当日达</p>
          </div>
          
          <!-- 服务项2 -->
          <div class="text-center p-4 rounded hover:bg-gray-50 transition-colors">
            <div class="w-14 h-14 bg-huawei-blue/10 rounded-full flex items-center justify-center mx-auto mb-3">
              <i class="fa fa-headphones text-xl text-huawei-blue"></i>
            </div>
            <h3 class="font-semibold mb-1">7×24小时客服</h3>
            <p class="text-huawei-gray text-sm">专业客服团队随时为您解答疑问，提供技术支持</p>
          </div>
          
          <!-- 服务项3 -->
          <div class="text-center p-4 rounded hover:bg-gray-50 transition-colors">
            <div class="w-14 h-14 bg-huawei-blue/10 rounded-full flex items-center justify-center mx-auto mb-3">
              <i class="fa fa-shield text-xl text-huawei-blue"></i>
            </div>
            <h3 class="font-semibold mb-1">两年质保</h3>
            <p class="text-huawei-gray text-sm">大部分产品享受两年官方质保服务，使用更放心</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 关于我们 -->
    <section id="about" class="py-12 bg-huawei-dark text-white">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
          <div>
            <h2 class="text-2xl font-bold mb-4">构建万物互联的智能世界</h2>
            <p class="text-white/80 mb-3">华为创立于1987年，是全球领先的ICT基础设施和智能终端提供商。我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。</p>
            <p class="text-white/80 mb-4">目前华为约有19.7万员工，业务遍及170多个国家和地区，服务全球30多亿人口。</p>
            <a href="#" class="inline-block px-5 py-2 bg-huawei-blue text-white rounded hover:bg-huawei-blue/90 transition-colors">了解更多华为故事</a>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <img src="https://picsum.photos/id/3/600/800" alt="华为办公环境" class="rounded shadow h-48 object-cover">
            <img src="https://picsum.photos/id/20/600/800" alt="华为研发中心" class="rounded shadow h-56 mt-4 object-cover">
          </div>
        </div>
      </div>
    </section>
    
    <!-- 支持与联系 -->
    <section id="support" class="py-12">
      <div class="container mx-auto px-4">
        <div class="text-center mb-8">
          <h2 class="text-2xl font-bold mb-2">获取支持</h2>
          <p class="text-huawei-gray max-w-2xl mx-auto">我们随时为您提供帮助和支持</p>
        </div>
        
        <div class="max-w-3xl mx-auto">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div class="bg-gray-50 p-4 rounded text-center">
              <div class="text-huawei-blue text-2xl font-bold mb-1">950800</div>
              <p class="text-huawei-gray text-sm">华为消费者服务热线</p>
            </div>
            <div class="bg-gray-50 p-4 rounded text-center">
              <div class="text-huawei-blue text-2xl mb-1"><i class="fa fa-weixin"></i></div>
              <p class="text-huawei-gray text-sm">关注华为官方微信</p>
            </div>
          </div>
          
          <div class="bg-white border border-gray-200 rounded p-4 shadow-sm">
            <h3 class="font-semibold mb-3">常见问题</h3>
            <div class="space-y-3">
              <div class="border-b border-gray-100 pb-2">
                <button class="flex justify-between items-center w-full text-left font-medium text-sm">
                  <span>如何查询产品保修期？</span>
                  <i class="fa fa-chevron-down text-huawei-gray"></i>
                </button>
              </div>
              <div class="border-b border-gray-100 pb-2">
                <button class="flex justify-between items-center w-full text-left font-medium text-sm">
                  <span>如何申请售后服务？</span>
                  <i class="fa fa-chevron-down text-huawei-gray"></i>
                </button>
              </div>
              <div class="border-b border-gray-100 pb-2">
                <button class="flex justify-between items-center w-full text-left font-medium text-sm">
                  <span>产品固件如何升级？</span>
                  <i class="fa fa-chevron-down text-huawei-gray"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 订阅区域 -->
    <section class="py-10 bg-huawei-blue text-white">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-xl font-bold mb-3">订阅华为资讯</h2>
        <p class="text-white/80 mb-4 max-w-2xl mx-auto">第一时间获取产品发布、促销活动等最新资讯</p>
        
        <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="请输入您的邮箱地址" class="flex-1 px-3 py-2 rounded text-huawei-dark focus:outline-none focus:ring-2 focus:ring-white">
          <button type="submit" class="px-4 py-2 bg-white text-huawei-blue font-medium rounded hover:bg-gray-100 transition-colors">立即订阅</button>
        </form>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-huawei-dark text-white/70 py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div>
          <h4 class="text-white font-semibold mb-3">关于华为</h4>
          <ul class="space-y-1 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">公司简介</a></li>
            <li><a href="#" class="hover:text-white transition-colors">新闻中心</a></li>
            <li><a href="#" class="hover:text-white transition-colors">投资者关系</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-3">产品与服务</h4>
          <ul class="space-y-1 text-sm">
            <li><a href="#" class